<form [nzLayout]="'inline'" nz-form class="ant-advanced-search-form">
  <nz-form-item>
    <nz-form-label>{{l('container_no')}}</nz-form-label>
    <nz-form-control>
      <nz-input-group nzSuffixIcon="anticon">
        <input type="text" [(ngModel)]="keyword" [ngModelOptions]="{standalone: true}" nz-input
          [placeholder]="l('please_enter_container_no')">
      </nz-input-group>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label>{{l('warehousing_company')}}</nz-form-label>
    <nz-form-control>
      <nz-select style="width: 220px;"  name="company" [(ngModel)]="company" [ngModelOptions]="{standalone: true}"
        [nzPlaceHolder]="l('select_warehousing_company')">
        <nz-option [nzValue]="''" [nzLabel]="l('select_warehousing_company')"></nz-option>
        <nz-option *ngFor="let option of companyList" [nzValue]="option.id" [nzLabel]="option.houseName"></nz-option>
      </nz-select>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item class="control-area">
    <button nz-button [nzType]="'primary'" (click)="load()">{{l('search')}}</button>
    <button nz-button (click)="reset()">{{l('reset')}}</button>
    <button nz-button (click)="getList()">{{l('refresh')}}</button>
  </nz-form-item>
</form>
<div class="table-control-wrap">
  <button nz-button nzType="primary" (click)="showModal()">
    <i class="anticon anticon-plus-circle-o"></i>{{l('create')}}
  </button>
  <button nz-button nzType="primary" (click)="fileSelect.click()"><i
      class="anticon anticon-cloud-upload-o"></i>{{l("batch_import")}}
  </button>
  <input #fileSelect type="file" ng2FileSelect [uploader]="uploader" style="display:none" />
</div>

<nz-table #ajaxTable nzShowSizeChanger nzBordered [nzScroll]="{x:'1300px'}" [nzFrontPagination]="false"
  [nzData]="tableHelper.items" [nzLoading]="tableHelper.loading" [nzTotal]="tableHelper.totalCount"
  [(nzPageIndex)]="tableHelper.pageIndex" [nzShowTotal]="totalTemplate" [(nzPageSize)]="tableHelper.pageSize"
  (nzPageIndexChange)="load()" (nzPageSizeChange)="load()">
  <thead>
    <tr>
      <th nzWidth="100px" nzLeft="0px">{{l('serial_number')}}</th>
      <th nzWidth="200px" nzLeft="100px">{{l('container_no')}}</th>
      <th>{{l('container_spec')}}</th>
      <th>{{l('container_color')}}</th>
      <th>{{l('warehousing_company')}}</th>
      <th>{{l('source')}}</th>
      <th>{{l('logistics_information')}}</th>
      <th>{{l('cargo_information')}}</th>
      <th nzRight="0px">{{l('operation')}}</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let data of ajaxTable.data;let i = index">
      <td nzLeft="0px">{{i++1}}</td>
      <td nzLeft="100px">{{data.containerNo}}</td>
      <td>{{data.containerSpecifications}}</td>
      <td>{{data.containerColor}}</td>
      <td>{{data.containerCompanyName}}</td>
      <td>
        <span *ngIf="data.containerSource==1">{{l("platform")}}</span>
        <span *ngIf="data.containerSource==2">{{l("asycuda")}}</span>
      </td>
      <td>
        <a (click)="showLogisticModal(data)" *ngIf="data.hasLogistics==1">{{l('view_logistics_information')}}</a>
        <a (click)="showLogisticModal(data)" *ngIf="data.hasLogistics!=1">{{l('write_logistics_information')}}</a>
      </td>
      <td>
        <a (click)="showProductModal(data)" *ngIf="data.hasProductInfo==1">{{l('view_cargo_information')}}</a>
        <a (click)="showProductModal(data)" *ngIf="data.hasProductInfo!=1">{{l('write_cargo_information')}}</a>
      </td>
      <td nzRight="0px">
        <a (click)="createPath(data)">{{l('create_path')}}</a>
        <nz-divider nzType="vertical"></nz-divider>
        <a (click)="showModal(data.id)">{{l('edit')}}</a>
        <!--<nz-switch [ngModel]="data.status" (ngModelChange)="handleUsing(data)" nzCheckedChildren="启用" nzUnCheckedChildren="禁用"></nz-switch> -->
      </td>
    </tr>
  </tbody>
</nz-table>
<ng-template #totalTemplate let-total>
  {{l('total')}} {{total}} {{l('items')}}
</ng-template>

<nz-modal [nzWidth]="600" [(nzVisible)]="isVisible" [nzTitle]="title" (nzOnCancel)="handleCancel()"
  (nzOnOk)="handleOk()" [nzOkLoading]="isOkLoading">
  <form nz-form [formGroup]="validateForm">
    <nz-form-item nzFlex>
      <nz-form-label nzRequired nzFor="containerNo">{{l('container_no')}}</nz-form-label>
      <nz-form-control>
        <input nz-input formControlName="containerNo" id="containerNo" [(ngModel)]="model.containerNo">
        <nz-form-explain *ngIf="validateForm.get('containerNo').hasError('required')">{{l('please_enter_container_no')}}
        </nz-form-explain>
        <nz-form-explain *ngIf="validateForm.get('containerNo').hasError('pattern')">
          {{l('failed_to_come_up_to_specifications')}}</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item nzFlex>
      <nz-form-label nzFor="containerSpecifications">{{l('container_spec')}}</nz-form-label>
      <nz-form-control>
        <input nz-input formControlName="containerSpecifications" id="containerSpecifications"
          [(ngModel)]="model.containerSpecifications">
        <nz-form-explain *ngIf="validateForm.get('containerSpecifications').hasError('maxlength')">
          {{l('please_enter_max_length')}}255</nz-form-explain>

      </nz-form-control>
    </nz-form-item>
    <nz-form-item nzFlex>
      <nz-form-label nzFor="containerColor">{{l('container_color')}}</nz-form-label>
      <nz-form-control>
        <input nz-input formControlName="containerColor" id="containerColor" [(ngModel)]="model.containerColor">
        <nz-form-explain *ngIf="validateForm.get('containerColor').hasError('maxlength')">
          {{l('please_enter_max_length')}}255</nz-form-explain>

      </nz-form-control>
    </nz-form-item>
    <nz-form-item nzFlex>
      <nz-form-label nzFor="containerCompanyId">{{l('warehousing_company')}}</nz-form-label>
      <nz-form-control>
        <nz-select formControlName="containerCompanyId" [(ngModel)]="model.containerCompanyId">
          <nz-option [nzValue]="''" [nzLabel]="l('select_warehousing_company')"></nz-option>
          <nz-option *ngFor="let option of companyList" [nzValue]="option.id" [nzLabel]="option.houseName"></nz-option>
        </nz-select>
      </nz-form-control>
    </nz-form-item>
  </form>
</nz-modal>

<nz-modal nzWidth="1000" [(nzVisible)]="isVisibleLogistic" [nzTitle]="l('logistics_information')"
  (nzOnCancel)="handleCancelLogistic()" (nzOnOk)="handleOKLogistic()" [nzOkLoading]="isOkLoading">
  <form class="pro-form" nz-form [formGroup]="validateFormLogistic" (ngSubmit)="submitFormLogistic()">
    <div nz-row [nzGutter]="24">
      <div nz-col [nzSm]="12" [nzLg]="12">
        <nz-form-item nzFlex>
          <nz-form-label nzFor="customCode">{{l('customs_code')}}</nz-form-label>
          <nz-form-control>
            <input nz-input formControlName="customCode" id="customCode" [(ngModel)]="logistic.customCode">
            <nz-form-explain *ngIf="validateFormLogistic.get('customCode').hasError('maxlength')">
              {{l('please_enter_max_length')}}255</nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col [nzSm]="12" [nzLg]="12">
        <nz-form-item nzFlex>
          <nz-form-label nzRequired nzFor="containerCode">{{l('container_no')}}</nz-form-label>
          <nz-form-control>
            <input nz-input formControlName="containerCode" id="containerCode" disabled
              [(ngModel)]="logistic.containerCode">
            <nz-form-explain *ngIf="validateFormLogistic.get('containerCode').hasError('maxlength')">
              {{l('please_enter_max_length')}}255</nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
    <div nz-row [nzGutter]="24">
      <div nz-col [nzSm]="12" [nzLg]="12">
        <nz-form-item nzFlex>
          <nz-form-label nzFor="logisticsCode">{{l('logistics_code')}}</nz-form-label>
          <nz-form-control>
            <input nz-input formControlName="logisticsCode" id="logisticsCode" [(ngModel)]="logistic.logisticsCode">
            <nz-form-explain *ngIf="validateFormLogistic.get('logisticsCode').hasError('maxlength')">
              {{l('please_enter_max_length')}}255</nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col [nzSm]="12" [nzLg]="12">
        <nz-form-item nzFlex>
          <nz-form-label nzFor="importer">{{l('importer')}}</nz-form-label>
          <nz-form-control>
            <input nz-input formControlName="importer" id="importer" [(ngModel)]="logistic.importer">
            <nz-form-explain *ngIf="validateFormLogistic.get('importer').hasError('maxlength')">
              {{l('please_enter_max_length')}}255</nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
    <div nz-row [nzGutter]="24">
      <div nz-col [nzSm]="12" [nzLg]="12">
        <nz-form-item nzFlex>
          <nz-form-label nzFor="importTime">{{l('import_date')}}</nz-form-label>
          <nz-form-control>
            <nz-date-picker [(ngModel)]="logistic.importTime" formControlName="importTime"></nz-date-picker>
            <nz-form-explain *ngIf="validateFormLogistic.get('importTime').hasError('maxlength')">
              {{l('please_enter_max_length')}}255</nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col [nzSm]="12" [nzLg]="12">
        <nz-form-item nzFlex>
          <nz-form-label nzFor="pod">{{l('country_of_origin_of_goods')}}</nz-form-label>
          <nz-form-control>
            <input nz-input formControlName="pod" id="pod" [(ngModel)]="logistic.pod">
            <nz-form-explain *ngIf="validateFormLogistic.get('pod').hasError('maxlength')">
              {{l('please_enter_max_length')}}255</nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
    <div nz-row [nzGutter]="24">
      <div nz-col [nzSm]="12" [nzLg]="12">
        <nz-form-item nzFlex>
          <nz-form-label nzFor="loadingport">{{l('loading_port')}}</nz-form-label>
          <nz-form-control>
            <input nz-input formControlName="loadingport" id="loadingport" [(ngModel)]="logistic.loadingport">
            <nz-form-explain *ngIf="validateFormLogistic.get('loadingport').hasError('maxlength')">
              {{l('please_enter_max_length')}}255</nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col [nzSm]="12" [nzLg]="12">
        <nz-form-item nzFlex>
          <nz-form-label nzFor="domesticdestination">{{l('domesticdestination')}}</nz-form-label>
          <nz-form-control>
            <input nz-input formControlName="domesticdestination" id="domesticdestination"
              [(ngModel)]="logistic.domesticdestination">
            <nz-form-explain *ngIf="validateFormLogistic.get('domesticdestination').hasError('maxlength')">
              {{l('please_enter_max_length')}}255</nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
    <div nz-row [nzGutter]="24">
      <div nz-col [nzSm]="12" [nzLg]="12">
        <nz-form-item nzFlex>
          <nz-form-label nzFor="transportcompany">{{l('transport_company')}}</nz-form-label>
          <nz-form-control>
            <input nz-input formControlName="transportcompany" id="transportcompany"
              [(ngModel)]="logistic.transportcompany">
            <nz-form-explain *ngIf="validateFormLogistic.get('transportcompany').hasError('maxlength')">
              {{l('please_enter_max_length')}}255</nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col [nzSm]="12" [nzLg]="12">
        <nz-form-item nzFlex>
          <nz-form-label nzFor="transporttool">{{l('transport_tool')}}</nz-form-label>
          <nz-form-control>
            <input nz-input formControlName="transporttool" id="transporttool" [(ngModel)]="logistic.transporttool">
            <nz-form-explain *ngIf="validateFormLogistic.get('transporttool').hasError('maxlength')">
              {{l('please_enter_max_length')}}255</nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
  </form>
</nz-modal>

<nz-modal nzWidth="1000" [(nzVisible)]="isVisibleProduct" [nzTitle]="l('cargo_information')" [nzFooter]="modalFooter"
  (nzOnCancel)="handleCancelProduct()" [nzOkLoading]="isOkLoading">
  <form nz-form class="pro-form" [formGroup]="validateFormProduct" (ngSubmit)="submitFormProduct()">
    <div nz-row [nzGutter]="24">
      <div nz-col [nzSm]="12" [nzLg]="12">
        <nz-form-item nzFlex>
          <nz-form-label nzRequired nzFor="customCode">{{l('customs_code')}}</nz-form-label>
          <nz-form-control>
            <input nz-input formControlName="customCode" id="customCode" [(ngModel)]="product.customCode">
            <nz-form-explain *ngIf="validateFormProduct.get('customCode').hasError('required')">
              {{l('please_enter_custom_code')}}</nz-form-explain>
            <nz-form-explain *ngIf="validateFormProduct.get('customCode').hasError('maxlength')">
              {{l('please_enter_max_length')}}255</nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col [nzSm]="12" [nzLg]="12">
        <nz-form-item nzFlex>
          <nz-form-label nzRequired nzFor="containerCode">{{l('container_no')}}</nz-form-label>
          <nz-form-control>
            <input nz-input formControlName="containerCode" id="containerCode" [(ngModel)]="product.containerCode">
            <nz-form-explain *ngIf="validateFormProduct.get('containerCode').hasError('required')">
              {{l('please_enter_container_no')}}
            </nz-form-explain>
            <nz-form-explain *ngIf="validateFormProduct.get('containerCode').hasError('maxlength')">
              {{l('please_enter_max_length')}}255</nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
    <div nz-row [nzGutter]="24">
      <div nz-col [nzSm]="12" [nzLg]="12">
        <nz-form-item nzFlex>
          <nz-form-label nzRequired nzFor="despachante">{{l('clearance')}}</nz-form-label>
          <nz-form-control>
            <input nz-input formControlName="despachante" id="despachante" [(ngModel)]="product.despachante">
            <nz-form-explain *ngIf="validateFormProduct.get('despachante').hasError('required')">
              {{l('please_enter_clearance')}}
            </nz-form-explain>
            <nz-form-explain *ngIf="validateFormProduct.get('despachante').hasError('maxlength')">
              {{l('please_enter_max_length')}}255</nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col [nzSm]="12" [nzLg]="12">
        <nz-form-item nzFlex>
          <nz-form-label nzRequired nzFor="ctn">{{l('number_of_packages')}}</nz-form-label>
          <nz-form-control>
            <nz-input-number formControlName="ctn" id="ctn" [(ngModel)]="product.ctn" [nzMin]="1" [nzStep]="1"
              [nzMax]="9999">
            </nz-input-number>
            <nz-form-explain *ngIf="validateFormProduct.get('ctn').errors">
              {{l('please_enter_number_of_packages')}} </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
    <div nz-row [nzGutter]="24">
      <div nz-col [nzSm]="12" [nzLg]="12">
        <nz-form-item nzFlex>
          <nz-form-label nzRequired nzFor="packagekind">{{l('kind_of_package')}}</nz-form-label>
          <nz-form-control>
            <input nz-input formControlName="packagekind" id="packagekind" [(ngModel)]="product.packagekind">
            <nz-form-explain *ngIf="validateFormProduct.get('packagekind').hasError('required')">
              {{l('please_enter_kind_of_package')}}
            </nz-form-explain>
            <nz-form-explain *ngIf="validateFormProduct.get('packagekind').hasError('maxlength')">
              {{l('please_enter_max_length')}}255</nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col [nzSm]="12" [nzLg]="12">
        <nz-form-item nzFlex>
          <nz-form-label nzRequired nzFor="du">{{l('only_declare')}}</nz-form-label>
          <nz-form-control>
            <input nz-input formControlName="du" id="du" [(ngModel)]="product.du">
            <nz-form-explain *ngIf="validateFormProduct.get('du').hasError('required')">
              {{l('please_enter_only_declare')}}
            </nz-form-explain>
            <nz-form-explain *ngIf="validateFormProduct.get('du').hasError('maxlength')">
              {{l('please_enter_max_length')}}255</nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
    <div nz-row [nzGutter]="24">
      <div nz-col [nzSm]="12" [nzLg]="12">
        <nz-form-item nzFlex>
          <nz-form-label nzRequired nzFor="pesobruto">{{l('gross_weight')}}</nz-form-label>
          <nz-form-control>
            <nz-input-number [(ngModel)]="product.pesobruto" formControlName="pesobruto" [nzMin]="1" [nzStep]="1"
              [nzMax]="9999">
            </nz-input-number>
            <nz-form-explain *ngIf="validateFormProduct.get('pesobruto').errors">{{l('please_enter_gross_weight')}}
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col [nzSm]="12" [nzLg]="12">
        <nz-form-item nzFlex>
          <nz-form-label nzRequired nzFor="pesoquido">{{l('net_weight')}}</nz-form-label>
          <nz-form-control>
            <nz-input-number [(ngModel)]="product.pesoquido" formControlName="pesoquido" [nzMin]="1" [nzStep]="1"
              [nzMax]="9999">
            </nz-input-number>
            <nz-form-explain *ngIf="validateFormProduct.get('pesoquido').errors">{{l('please_enter_net_weight')}}
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
    <div nz-row [nzGutter]="24">
      <div nz-col [nzSm]="12" [nzLg]="12">
        <nz-form-item nzFlex>
          <nz-form-label nzRequired nzFor="rdia">{{l('customs_quarantine_results')}}</nz-form-label>
          <nz-form-control>
            <input nz-input formControlName="rdia" id="rdia" [(ngModel)]="product.rdia">
            <nz-form-explain *ngIf="validateFormProduct.get('rdia').hasError('required')">
              {{l('please_enter_customs_quarantine_results')}}
            </nz-form-explain>
            <nz-form-explain *ngIf="validateFormProduct.get('rdia').hasError('maxlength')">
              {{l('please_enter_max_length')}}255</nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>


    <div class="table-control-wrap">
      <a (click)="addPdModal()">
        <i class="anticon anticon-plus-circle-o"></i>{{l('create_product')}}</a>
    </div>

    <nz-table #basicTable [nzScroll]="{x:'952px'}" [nzData]="product.productDetailInfoDTOS" [nzShowTotal]="totalTemplate">
      <thead>
        <tr>
          <th>{{l('hs_no')}}</th>
          <th>{{l('product_name')}}</th>
          <th>{{l('specification')}}</th>
          <th>{{l('count')}}</th>
          <th>{{l("unit")}}</th>
          <th>{{l('country_of_origin')}}</th>
          <th>{{l('destination_country')}}</th>
          <th>{{l('price')}}</th>
          <th>{{l('total_price')}}</th>
          <th>{{l('currency_system')}}</th>
          <th>{{l('operation')}}</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let data of basicTable.data">
          <td>
            {{data.hsCode}}
          </td>
          <td>
            {{data.productName}}
          </td>
          <td>
            {{data.spc}}
          </td>
          <td>
            {{data.quantity}}
          </td>
          <td>
            {{data.unidade}}
          </td>
          <td>
            {{data.origin}}
          </td>
          <td>
            {{data.destination}}
          </td>
          <td>
            {{data.price}}
          </td>
          <td>
            {{data.total}}
          </td>
          <td>
            {{data.moeda}}
          </td>
          <td>
            <a (click)="editProductDetail(data)">{{l('edit')}}</a>
          </td>
        </tr>
      </tbody>
    </nz-table>

  </form>

  <ng-template #modalFooter>
    <button nz-button nzType="default" (click)="handleCancelProduct()">{{l('cancel')}}</button>
    <button nz-button nzType="primary" (click)="handleOkProduct()" [nzLoading]="isLoading">{{l('submit')}}</button>
  </ng-template>
</nz-modal>

<app-add-product-detail-modal #addProductDetailModal (modalSave)="addProductRow($event)"></app-add-product-detail-modal>
